<template>
    <view class="scroller-winners">
        <image class="scroller-winners__icon" src="@/static/images/red-package.png" />
        <cl-noticebar scrollable :text="list" direction="vertical"></cl-noticebar>
    </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            list: []
        };
    },
    mounted() {
        const rdn = n => {
            return parseInt(Math.random() * n);
        };
        const rd = () => {
            return {
                phone:
                    [
                        '159',
                        '173',
                        '180',
                        '181',
                        '186',
                        '189',
                        '199',
                        '134',
                        '191',
                        '153',
                        '133',
                        '176',
                        '152',
                        '187'
                    ][rdn(4)] +
                    '****' +
                    new Array(4)
                        .fill(1)
                        .map(() => rdn(9))
                        .join(''),
                text: `抢到${parseFloat(Math.random() * 60 + 128).toFixed(2)}元红包`
            };
        };

        this.list = new Array(1000).fill(1).map(() => {
            let { phone, text } = rd();
            return phone + '\n' + text;
        });
    }
};
</script>

<style lang="scss" scoped>
.scroller-winners {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 100rpx;
    padding: 0 16rpx;

    &__icon {
        height: 46rpx;
        width: 46rpx;
        margin-right: 5rpx;
    }
}

</style>
